<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="width*=1.1">放大10%</button>
			<button @click="width*=0.9">缩小10%</button>
			<img src="../img/m1.jpg" :width="width" />
			{{msg}}
			<input v-model="msg"/>
			<br>
			<input v-model="v"/>
			<!-- <span v-if="v % 2 == 0">偶数</span>
			<span v-else>奇数</span> -->
			{{v % 2 == 0 ? "偶数" : "奇数"}}
			姓名：<input v-model="student.name"/>
			年龄：<input v-model="student.age"/>
			<p>
			{{student.name}}是
			<span v-if="student.age >= 18">成年人</span>
			<span v-else>未成年</span>
			
			<!-- {{student.age >= 18 ? "成年人" : "未成年"}} -->
			
			</p>
			<hr>
			
			
			
			
		</div>

		<script>
			Vue.createApp({
				data() {
					return {
						width: 200,
						msg: "hello vue",
						v:8,
						student:{
							name: '聊许',
							age:'81'
						}
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>